<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
        /*font-size: 0;*/
        /*}*/
        div {
            width: 100px;
            height: 300px;
            background: red;
            display: inline-block;
            /*font-size: 14px;*/
        }
    </style>
</head>
<body>
<!--
    块元素
        div,h1-h6,p,ul,li,ol,dl,dt,dd,header,nav,footer,section,article,aside
        特征：
        1、默认独占一行
        2、没有给宽度的时候，宽度是auto，撑满一行(宽度就是父级的宽度)
        3、支持所有的css命令
    行内元素
        a,span,strong,em,mark,img,time
        特征：
        1、内容撑开宽高
            宽高的值都是auto，只不过显出来的宽高是由内容撑开的
        2、不支持设置宽高
        3、不支持上下的margin与上下padding(左右支持)
            上下的padding是有问题，虽然把背影撑出来了，这个只是表面现象，它不会对其它的元素有影响
        4、所有的行内元素都会在一行显示
        5、代码换行会被解析成一个空格
    行内块元素
        特征：
        1、行内元素支持宽高
        2、块元素可以在一行中显示
        3、不给宽高的话，宽度会由内容撑开
        4、代码换行会被解析成一个空格
        5、IE6、7不支持块元素的inline-block
            IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block

-->
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>